﻿<template>
    <div id="header">
        <!-- <Card shadow> -->
        <Row>
            <Col class="left-col" span="5">
                <a href="https://www.anhuanjia.com/" target="_blank" rel="noopener noreferrer">
                    <img src='../../../assets/img/gslogo.png' alt="" style="vertical-align: middle;" >
                </a>
            <span>|</span>
            <span>环保公示</span>
            </Col>
            <Col class="mid-col" span="12" offset="1">
            <Menu mode="horizontal" :active-name="activeName">
                <MenuItem to="/home/HomePublic" name="/home/HomePublic">
                首页
                </MenuItem>
                <MenuItem to="/home/OnePublicList" name="/home/OnePublicList">
                一次公示
                </MenuItem>
                <MenuItem to="/home/TwoPublicList" name="/home/TwoPublicList">
                二次公示
                </MenuItem>
                <MenuItem to="/home/CheckPublicList" name="/home/CheckPublicList">
                验收公示
                </MenuItem>
                <MenuItem to="/home/AllPublicList" name="/home/AllPublicList">
                全本公示
                </MenuItem>
                <MenuItem to="/home/OtherPublicList" name="/home/OtherPublicList">
                其他公示
                </MenuItem>
            </Menu>
            </Col>
            <Col class="right-col" span="4" offset="1">
            
            <div v-if="isLogin">
                <a href="javascript:void(0)" @click="logout">
                    注销
                </a>
                <span style="padding:0 10px 0 20px;">{{loginName.UserName}}</span>
                <Avatar :src="loginName.userPhoto" icon="ios-person" size="large" />
            </div>
            <div v-else>
                <a href="javascript:void(0)" style="margin-right:10px" @click="handleClick">请登录</a>
             <!-- <img :src="imgscr" style="vertical-align: middle;width:50px;height:50px;"> -->
             <Avatar icon="ios-person" size="large" />
            </div>
            </Col>
        </Row>
        <Modal
            v-model="loginModal" class="loginModal">
            <div class="form-con">
                <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="submit">
                    <Tabs value="name1">
                    <TabPane label="登录" name="name1">
                        <Card :bordered="false" dis-hover>
                        <br>
                        <FormItem prop="phone" class="martop">
                            <Input v-model="form.phone" placeholder="请输入用户名"></Input>
                        </FormItem>
                        <br>
                        <FormItem prop="password">
                            <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
                        </FormItem>
                        <br>
                        <FormItem>
                            <Button @click="submit" type="primary" style="width: 96px;height: 40px;">立即登录</Button>
                            <a herf="#" v-show="false" class="forGetPassword">忘记密码</a>
                        </FormItem>
                        </Card>

                    </TabPane>

                    <TabPane v-if="false" label="注册" name="name2">
                        <Card :bordered="false">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                            <FormItem prop="username">
                            <Input v-model="formValidate.username" placeholder="手机号码"></Input>
                            </FormItem>
                            <br>
                            <FormItem prop="password">
                            <Input v-model="formValidate.password" placeholder="短信验证码">
                                <span slot="append">获取验证码</span>
                            </Input>
                            </FormItem>
                            <br>
                            <FormItem prop="aginPassword">
                            <Input v-model="formValidate.aginPassword" placeholder="设置密码" @on-click="close" icon="ios-clock-outline"></Input>
                            </FormItem>
                            <br>
                            <FormItem>
                            <!-- <Button type="primary" @click="handleSubmit('formValidate')">立即注册</Button> -->
                            <Button type="primary">立即注册</Button>
                            </FormItem>
                        </Form>
                        </Card>

                    </TabPane>
                    </Tabs>
                </Form>
            </div>
            <div slot="footer"></div>
        </Modal>

        <!-- </Card> -->
    </div>
</template>

<script>
    export default {
        data() {
            return {
                loginModal: false,
               
                form: {
                    phone: '',
                    password: ''
                },
                formValidate: {
                    username: '',
                    password: '',
                    aginPassword: "",
                    identity: '',
                },
                ruleValidate: {
                    username: [{
                        required: true,
                        message: 'The name cannot be empty',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: 'Mailbox cannot be empty',
                        trigger: 'blur'
                    }],
                    aginPassword: [{
                        required: true,
                        message: 'Mailbox cannot be empty',
                        trigger: 'blur'
                    }],
                    identity: [{
                        required: true,
                        message: 'Please select the city',
                        trigger: 'change'
                    }],
                }
            }
        },
        computed: {
            rules() {
                return {
                phone: {
                    required: true,
                    message: '账号不能为空',
                    trigger: 'blur'
                },
                password: {
                    required: true,
                    message: '密码不能为空',
                    trigger: 'blur'
                },
                }
            },
            activeName() {
                return this.$route.path
            },
            isLogin() {
                return this.$store.state.isLogin
            },
            loginName() {
                return this.$store.state.userInfo  
            },
        },
        created(){
            if(this.$route.query.Project_id){
                axios.post('/member/findById').then(res=>{
                    var userInfo = {
                        userName: res.member.realName,     //  用户名
                        publicSum: res.member.count,       //  用户发布次数
                        userPhoto: res.member.photo == ''? 'https://static.anhuanjia.com/avatar/default.png?x-oss-process=image/resize,m_fill,h_96,w_96' : 'https://static.anhuanjia.com/avatar/'+ res.member.photo + '?x-oss-process=image/resize,m_fill,h_96,w_96&' + new Date().getTime()//用户头像    
                    }
                    this.$store.commit('userPhoto',res.member.photo)
                    this.userPhoto =  res.member.photo == ''? 'https://static.anhuanjia.com/avatar/default.png?x-oss-process=image/resize,m_fill,h_96,w_96' : 'https://static.anhuanjia.com/avatar/'+ res.member.photo + '?x-oss-process=image/resize,m_fill,h_96,w_96&' + new Date().getTime()
                    this.$store.commit('logoutInfo',true)
                    this.$store.commit('loginUserInfo', userInfo)
                    localStorage.setItem('userInfo',JSON.stringify(userInfo))
                    localStorage.setItem('isLogin',true)
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted() {
            if(!this.$store.state.isLogin) {
                this.$store.state.isLogin = localStorage.getItem('isLogin')
                if(this.$store.state.isLogin&&localStorage.getItem('userInfo')) {
                    var userInfo = JSON.parse(localStorage.getItem('userInfo'))
                    this.$store.commit('loginUserInfo', userInfo)
                } 
            }
        },
        methods: {
            handleClick() {
                this.loginModal = true
            },
            logout() {
                this.$Modal.confirm({
                    title: '确认退出',
                    onOk: () => {
                        axios.get('/member/ajaxlogout').then(res=>{
                        if(res.logout==true) {
                            this.$store.commit('logoutInfo')
                            localStorage.clear()
                            this.$Message.success('注销成功！');
                            this.$router.push({name: 'HomePublic'})
                        }
                        }).catch(err=>{
                        console.log(err)
                        })
                        
                    }
                    });
            },
            close(){
                console.log('asdfasdf')
            },
            submit() {
                this.$refs.loginForm.validate((valid) => {
                console.log(valid);
                if (valid) {
                    let info = this.form
                    axios.post('/member/challenge',{
                            UserName: info.phone,
                            Password: info.password,
                        })
                        
                    .then((res) => {
                        
                    if (!res.status) {
                        this.$Message.error('用户名或密码错误');
                    } else {
                        this.loginModal = false
                        axios.post("/member/findOne").then((res)=>{
                            localStorage.setItem('uId',res.member.id);
                            localStorage.setItem('id',res.member.id)
                        }).catch(err=>{
                            console.log(err)
                        })
                        axios.get("/operationLog/loginOper").then((res)=>{
                            if(res._STATUS == 1) {
                              
                                axios.post('/member/findById').then(res=>{
                                    var userInfo = {
                                        userName: res.member.realName,//  用户名
                                        publicSum: res.member.count,//  用户发布次数
                                        userPhoto: res.member.photo == ''? 'https://static.anhuanjia.com/avatar/default.png?x-oss-process=image/resize,m_fill,h_96,w_96' : 'https://static.anhuanjia.com/avatar/'+ res.member.photo + '?x-oss-process=image/resize,m_fill,h_96,w_96&' + new Date().getTime()//用户头像    
                                    }
                                    this.$store.commit('userPhoto',res.member.photo)
                                    this.userPhoto =  res.member.photo == ''? 'https://static.anhuanjia.com/avatar/default.png?x-oss-process=image/resize,m_fill,h_96,w_96' : 'https://static.anhuanjia.com/avatar/'+ res.member.photo + '?x-oss-process=image/resize,m_fill,h_96,w_96&' + new Date().getTime()
                                    this.$store.commit('logoutInfo',true)
                                    this.$store.commit('loginUserInfo', userInfo)
                                    localStorage.setItem('userInfo',JSON.stringify(userInfo))
                                    localStorage.setItem('isLogin',true)
                                }).catch(err=>{
                                    console.log(err)
                                })
                            }
                        })
                    }
                    })
                }
                })
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
                })
            },
            handleReset(name) {
                this.$refs[name].resetFields();
            }

        }
}
</script>

<style lang="less">
    #header {
        max-width: 1200px;
        margin: auto;
        box-shadow:0px 15px 10px -15px #ccc;
        .ivu-row {
            height: 100%;

            .left-col {
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    font-size: 20px;
                    font-weight: bold;
                    color: #515a6e;
                }
            }

            .right-col {
                text-align: right
            }
        }
        .ivu-menu-light{
            margin-top: 5px !important;
            }
    }
    .forGetPassword {
        color: #ED4014;
        float: right;
        margin-right: 10px;
    }
    .loginModal  {
        .ivu-modal-footer {
            border: initial !important;
            padding: initial !important;
        }
    }

</style>
